<template>
    <div class="findlist">
        <div class="left">
			<van-sidebar v-model="onleft">
				<van-sidebar-item 
				v-for="(item,index) in cateArr"
				:key="item.id"
				:title="item.cate_zh" 
				:class="(onleft===index?'on':'')" />
			</van-sidebar>
		</div>
        <div class="right">
			<van-grid :column-num='3'>
				<van-grid-item
					v-for='item in cache[onleft]'
					:key='item.id'
				>
					<template>
						<div class="good">
							<img :src='$img.imgBase +item.img' />
							<span v-text='item.name'></span>
						</div>
					</template>
				</van-grid-item>
			</van-grid>
		</div>

        <Tabbar/>
    </div>
    
</template>

// import { Tabbar,} from '../../components//index';
// import{Sidebar, SidebarItem,Grid,GridItem } from 'vant'
// import {fetchFindlist,fetchGoodList} from '@/utils/api'
// // import {mapActions,mapState,mapMutations} from

// export default {
//     components:{ 
// 		[Sidebar.name]:Sidebar,
// 		[SidebarItem.name]:SidebarItem,
// 		[Grid.name]:Grid,
// 		[GridItem.name]:GridItem,
//         Tabbar
//     },
// 	data(){
// 		return{
// 			onleft:0,
// 			cateArr: [
// 			],
// 			goodArr: [
// 			]


// 		}

// 	},
// 	watch:{
// 		onleft(){
// 			this.twoinif()
// 		}

// 	},
// 	mounted(){
// 		this.inif()

// 	},
// 	methods:{
// 		inif(){
// 		fetchFindlist().then(res=>{
// 		this.cateArr = res.list
// 		this.twoinif()
// 		})
// 		},
// 		twoinif(){
// 			const cate = this.cateArr[this.onleft].cate
// 			fetchGoodList({cate}).then(res=>{
// 			console.log(res);
// 			this.goodArr = res.list
// 		})

// 		}
// 	}
       
    
    
// }




// 走状态管理
<script>
import { Tabbar,} from '../../components//index';
import{Sidebar, SidebarItem,Grid,GridItem } from 'vant'
import {fetchFindlist,} from '@/utils/api'
import {mapActions,mapMutations,mapState,} from 'vuex'

export default {
    components:{ 
		[Sidebar.name]:Sidebar,
		[SidebarItem.name]:SidebarItem,
		[Grid.name]:Grid,
		[GridItem.name]:GridItem,
        Tabbar
    },
	data(){
		return{
			onleft:0,
			cateArr: [
			],
			goodArr: [
			]

		}

	},
	computed:{
		...mapState('good',['cache'])
	}
	,
	watch:{
		onleft(){
			if(!this.cache[this.onleft]) this.twoinif()

		}

	},
	async activated(){
		// this.inif()
		// // this.twoinif()
			const res = await fetchFindlist()
			
			this.cateArr = res.list
			this.twoinif()


	},
	methods:{
		...mapMutations('good',['deletcll']),
		...mapActions('good',['getfind']),
		
		twoinif(){
			const cate = this.cateArr[this.onleft].cate
			this.getfind({index:this.onleft,cate})

		}
	},
	deactivated(){
		this.deletcll()
	}
       
    
    
}
</script>
<style lang="scss" scoped>
.findlist{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	.left {
		position: absolute;
		top: 0;
		width: 2.27rem;
		bottom: 1.33rem;
		left: 0;
		overflow-y: scroll;
		.van-sidebar {
			width: 100%;
		}
		.van-sidebar-item--select::before {
			background-color: transparent;
		}
		.van-sidebar-item.on {
			color: #E93B3D;
		}
	}
	.right {
		position: absolute;
		top: 0;
		left: 2.27rem;
		bottom: 1.33rem;
		right: 0;
		overflow-y: scroll;
		.good {
			font-size: .32rem;
			text-align: center;
			img {
				width: 1.87rem;
				height: 1.87rem;
				display: inline-block;
			}

		}
	}
}

</style>